<template>
  <el-dialog title="试题预览" :visible.sync="dialogVisible" width="width">
    <div>
      <el-divider>
        <span>基本信息</span>
      </el-divider>
      <el-row type="flex" justify="space-between">
        <el-col :span="12">
          试题编号:
          {{addInfo.quest_num}}
        </el-col>
        <el-col
          :span="6"
        >试题类型: {{addInfo.quest_type===1?'单选题':addInfo.quest_type===2?'多选题':addInfo.quest_type===3?'判断题':'简答题'}}</el-col>
        <el-col :span="6">归属目录:{{addInfo.directory_name}}</el-col>
      </el-row>
      <br />
      <el-row type="flex" justify="space-between">
        <el-col v-for="item in addInfo.tag_info" :key="item" :span="6">
          标签信息:
          {{item}}
        </el-col>
        <el-col :span="6">
          发布状态:
          <el-tag type="success">{{addInfo.show_state===1?'上架':'下架'}}</el-tag>
        </el-col>
        <el-col :span="6">审核人:暂无</el-col>
        <el-col :span="6">
          审核状态:
          <el-tag
            type="success"
          >{{addInfo.check_state===1?'待审核':addInfo.check_state===2?'通过':'不通过'}}</el-tag>
        </el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">审核意见:{{addInfo.check_remarks}}</el-col>
        <el-col :span="6">创建人:{{addInfo.create_name}}</el-col>
        <el-col :span="6">难度系数:{{addInfo.difficulty===1?'简单':addInfo.difficulty===2?'中等':'较难'}}</el-col>
        <el-col :span="6">发布时间:{{addInfo.created_at| formatDate}}</el-col>
      </el-row>

      <el-divider>
        <span>试题信息</span>
      </el-divider>
      <el-row>
        <el-col>
          <b>题干信息:</b>
          <p v-html="addInfo.question" style="color:#609eff"></p>
        </el-col>
      </el-row>
      <el-row class="flex">
        <b>选项信息：</b>
        <!-- 单选/多选/判断 -->
        <div v-if="addInfo.quest_type!=4">
          <el-checkbox
            v-for="(item,index) in toParse(addInfo.quest_options)"
            :key="index"
            :checked="item.is_true"
          >{{ item.code }} {{ item.content }}</el-checkbox>
        </div>
        <!-- 简答 -->
        <div v-if="addInfo.quest_type==4" v-html="addInfo.quest_answer" />
      </el-row>

      <el-divider>
        <span>答案信息</span>
      </el-divider>
      <el-row>
        <el-col>
          <b>正确答案:</b>
          <p style="color:#609eff" v-html="addInfo.quest_answer"></p>
        </el-col>
        <el-col :span="8">
          <b>答案解析:</b>
          <p v-html="addInfo.quest_remark"></p>
        </el-col>
      </el-row>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddInfo",
  components: {},
  props: {},
  data() {
    return {
      dialogVisible: false,
      addInfo: {}
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toParse(val) {
      if (!val) return [];
      // console.log(val);
      return JSON.parse(val);
    }
  }
};
</script>
<style lang="less" scoped>
</style>